<template>
  <el-container class="setting-center_mall-shop-setting_goods-info">
    <el-button class="fixedRight" type="primary" icon="el-icon-sort" size="small" @click="$showHide()" />
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="商品名称">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物流单号">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
          </el-row>
          <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getList" />
        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
          <el-button icon="el-icon-plus" size="small" @click="getList(scope.row.name)">商户商品管理</el-button>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          row-id="id"
          highlight-hover-row
          :auto-resize="true"
          :data="tableData"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column field="name1" align="center" title="订单编号" />
          <vxe-table-column field="name2" align="center" title="收货人" />
          <vxe-table-column field="name3" align="center" title="手机号" />
          <vxe-table-column field="name4" align="center" title="邮政编码" />
          <vxe-table-column field="name5" align="center" title="收货地址" />
          <vxe-table-column field="name6" align="center" title="配送方式" />
          <vxe-table-column field="name7" align="center" title="物流单号" />
          <vxe-table-column title="操作" fixed="right" align="center" width="170" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-edit" @click="getList(scope.row.name)">编辑</el-button>
              <el-button type="text" size="mini" icon="el-icon-delete" @click="getList(scope.row.name)">日志</el-button>
              <el-button type="text" size="mini" icon="el-icon-delete" @click="getList(scope.row.name)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="tableCurrentPage"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getRentList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>

import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      options: [],
      checkList: [],
      rules: {
        name: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择所在城市', trigger: 'blur' }
        ]
      },
      title: '蜂网电子商务',
      params: {
        name: '0'
      },
      tableData: [
        {
          name1: '13513461321354',
          name2: '张三',
          name3: '18888888888',
          name4: '230000',
          name5: '上海市闵行区申虹路188号',
          name6: '顺丰',
          name7: '84684646516845'
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {
  },
  methods: {
    refreshParams(params) {
      this.params = params
    },
    getList() {}
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting_goods-info {
  .img {
    width: 40px;
    height: 40px;
  }
}
</style>
